import React, { useEffect, useState } from 'react';
import HgBreadCrumb from '../../../components/HgBreadCrumb'
import {Button,Table,Switch,notification} from 'antd'
import {PlusOutlined} from '@ant-design/icons'
import service from '../../../api'
import "./index.scss"
import { useNavigate } from 'react-router-dom';
import _ from 'lodash'

const Swiper = () => {

    //处理开关状态
    var handleCheck = async (bannerid:any,flag:any)=>{
        var res = await service.swiper.banner_updateFlag( {bannerid,flag: !flag } )
        if( res.data.code == 200 ){
            notification.success({message:'切换状态成功!',duration:2});
            var newbannerlist = _.cloneDeep(bannerlist);
            var item:any = newbannerlist.find((item:any)=>item.bannerid==bannerid);
            if( item ){
                item.flag = !item.flag;
            } 
            setBannerlist(newbannerlist);
        }
    }
    var handleDelete = async (bannerid:any)=>{
        var res = await service.swiper.banner_delete( {bannerid } )
        if( res.data.code == 200 ){
            notification.success({message:'删除成功!',duration:2});
            var newbannerlist = _.cloneDeep(bannerlist);
            var i:any = newbannerlist.findIndex((item:any)=>item.bannerid==bannerid);
            if( i != -1 ){
                newbannerlist.splice(i,1);
            } 
            setBannerlist(newbannerlist);
        }
    }
    var columns = [
        {
            title: '序号',
            key: 'id',
            render: (_:any,record:any,index:any) => {
                return index+1;
            }, //用来代替dataIndex , 渲染一些特殊的内容(标签/组件)
        },
        {
            title: '图片',
            key: 'name',
            width: 200,
            render: (_:any,record:any,index:any) => {
                return <img src={record.img} alt="" />
            },
        },
        {
            title: '图片链接',
            key: 'price',
            render: (_:any,record:any,index:any) => {
                return <Button type="text" href={record.link} >链接</Button>
            },
            // render: (text) => <a>{text}</a>,
        },
        {
            title: '提示',
            dataIndex: 'alt',
            key: 'alt',
            // render: (text) => <a>{text}</a>,
        },
        {
            title: '是否展示',
            key: 'price',
            render: (_:any,record:any,index:any) => {
                return <Switch checked={record.flag} onClick={()=>{ handleCheck(record.bannerid,record.flag) }}/>
            },
        },
        {
            title: '操作',
            // dataIndex: 'price',
            key: 'price',
            render: (_:any,record:any,index:any) => {
                return (
                    <>
                        <Button type="primary" onClick={( )=>{ handleDelete(record.bannerid) }}>删除</Button>
                    </>
                )
            },
        }
    ]

    var [bannerlist,setBannerlist] = useState([]);
    var [loading,setLoading] = useState(false);
    var history = useNavigate()

    var requestBannerList = async ()=>{
        setLoading(true);
        var res:any = await service.swiper.banner_list();
        setLoading(false);
        res.data.data.forEach((item:any,index:any)=>{
            item.key = index;
        })
        setBannerlist(res.data.data);
    }
    useEffect( ()=>{
        requestBannerList()
    },[])

    var toSwiperAdd = ()=>{
        history('/index/swiperadd')
    }

    return (
        <div className='swiper'>
            <HgBreadCrumb />
            <div className="opts">
                <Button type="primary" onClick={toSwiperAdd}>添加轮播图<PlusOutlined /></Button>
            </div>
            {/* columns 表格头配置 */}
            {/* dataSource 表格的数据源 */}
            <Table className='swiper-table' size='middle' loading={loading} columns={columns} dataSource={bannerlist} />
        </div>
    );
};

export default Swiper;